<template>
	<div class="hcj-card">
		<div v-if="this.$slots.head" class="hcj-head-card" :style="{'padding': pd + 'px'}">
			<slot name="head"></slot>
		</div>
		<div class="hcj-body-card" :style="{'padding': pd + 'px'}">
			<slot></slot>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			pd: {
				type: String,
				default: '20'
			}
		},
		mounted() {
			// console.log(this.$slots.head)
		}
	}
</script>

<style scoped>
	.hcj-card {
		min-width: 300px;
		box-shadow: 0px 0px 8px #d6d6d6;
		border-radius: 10px;
		background-color: white;
	}
	.hcj-head-card {
		border-bottom: 1px solid #e1e1e1;
	}
</style>